<template>
  <div id="app">
    <navHead v-if="this.$route.meta.tabbar"></navHead>
    <transition name="fade" mode="out-in"><!--<transition>标签让路由有过渡动画,-->
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import navHead from "@/components/nav";
export default {
  name: "App",
  components: { navHead },
  mounted: function() {
    this.$nextTick(() => {});
  }
};
</script>

<style>
#app {
  width: 100%;
  height: 100%;
  min-width: 1360px;
  background: #f5f5f6;
  float: left;
  overflow-y: auto;
}
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.3s;
}
.fade-leave {
  opacity: 1;
}
.fade-leave-active {
  opacity: 0;
  transition: opacity 0.3s;
}

/* reset element-ui css */
.el-menu--popup-bottom-start {
  height: 220px;
  margin-top: 18px;
  display: flex;
}
.el-menu--horizontal>.el-submenu .el-submenu__icon-arrow{
  display: none;
}
.el-submenu__title, .el-menu-item{
  font-size: 18px;
  color: #505050 !important;
}
.el-submenu.is-active .el-submenu__title, .el-menu--horizontal>.el-menu-item.is-active{
  border-bottom: 3px solid #FEE101 !important;
}
</style>
